<template>
	<view class="container top">
		<view class="info-list">
			<view class="info-item">
				<text class="label">姓名</text>
				<text class="value">张三</text>
			</view>
			<view class="info-item">
				<text class="label">身份证号码</text>
				<text class="value">403652365412325263</text>
			</view>
			<view class="info-item">
				<text class="label">手机号</text>
				<text class="value">18893039203</text>
			</view>
			<view class="info-item">
				<text class="label">店名</text>
				<text class="value">店小友</text>
			</view>
			<view class="info-item">
				<text class="label">工商营业执照号码</text>
				<text class="value">425233646747474764646</text>
			</view>
			<view class="info-item">
				<text class="label">经营区域</text>
				<text class="value">焦作市山阳区</text>
			</view>
			<view class="info-item">
				<text class="label">地址</text>
				<text class="value">山阳区迎宾路32号</text>
			</view>
			
			<view class="info-item textarea-item">
				<text class="label">商家介绍</text>
				<view class="textarea-box">
					<text class="value">商家介绍商家介绍商家介绍商家介绍商家介绍商家介绍商家介绍商家介绍商家介绍商家介绍商家介绍商家介绍</text>
				</view>
			</view>
			
			<view class="image-section">
				<text class="label">营业执照</text>
				<view class="image-placeholder">
					<image src="/static/placeholder.png" mode="aspectFit"></image>
				</view>
			</view>
			
			<view class="image-section">
				<text class="label">门面照片</text>
				<view class="image-placeholder">
					<image src="/static/placeholder.png" mode="aspectFit"></image>
				</view>
			</view>
			
			<view class="image-section">
				<text class="label">身份证正反面</text>
				<view class="id-card-images">
					<view class="image-placeholder">
						<image src="/static/placeholder.png" mode="aspectFit"></image>
					</view>
					<view class="image-placeholder">
						<image src="/static/placeholder.png" mode="aspectFit"></image>
					</view>
				</view>
			</view>
		</view>
		
		<view class="submit-btn" @click="goToEdit">
			修改
		</view>
	</view>
</template>

<script setup>
function goToEdit() {
	uni.navigateTo({
		url: '/pages/kehuziliao/edit-kehuziliao'
	});
}
</script>

<style>
.top {
		width: 100%;
		height: 400rpx;
		background-image: url(/static/xiao@3x.png);
		background-repeat: no-repeat;
		background-size: 100%;
	}	
.container {
	min-height: 100vh;
	background-color: #ffffff;
	padding: 20rpx;
}

.info-list {
	padding: 0 20rpx;
	background-color: #fff;
	border-radius: 12rpx;
	width: 690rpx;
	margin-left: -15rpx;
}

.info-item {
	display: flex;
	padding: 30rpx 0;
	border-bottom: 1rpx solid #eee;
}

.label {
	width: 200rpx;
	color: #333;
	font-size: 28rpx;
}

.value {
	flex: 1;
	color: #666;
	font-size: 28rpx;
}

.textarea-item {
	flex-direction: column;
}

.textarea-box {
	margin-top: 20rpx;
	background-color: #f8f8f8;
	padding: 20rpx;
	border-radius: 8rpx;
}

.image-section {
	margin-top: 30rpx;
}

.image-placeholder {
	width: 300rpx;
	height: 200rpx;
	background-color: #f5f5f5;
	margin-top: 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.image-placeholder image {
	width: 60rpx;
	height: 60rpx;
}

.id-card-images {
	display: flex;
	gap: 20rpx;
	margin-top: 20rpx;
}

.submit-btn {
	position: fixed;
	bottom: 40rpx;
	left: 40rpx;
	right: 40rpx;
	height: 88rpx;
	line-height: 88rpx;
	text-align: center;
	background-color: #007AFF;
	color: #fff;
	border-radius: 44rpx;
	font-size: 32rpx;
}
</style>
